<template>
	<div class="playerinformation">
		<!-- 查询职工信息 -->
		<el-form label-width="80px" class="searchform">
		  <el-form-item label="职工编号:">
		    <el-input v-model="search_positionId" placeholder="请输入职工编号"></el-input>
		  </el-form-item>
		  <el-form-item label="部门:">
		    <el-select v-model="search_departmentId" placeholder="请选择部门">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
			</el-select>
		  </el-form-item>
		</el-form>
		<el-button type="primary" @click="search">查询</el-button>
		<el-button type="warning" @click="clear">清空</el-button>
		<!-- 职工信息表格数据 -->
		<el-table :data="tableData" border :row-class-name="tableRowClassName" fit style="width: 100%" 
		stripe="" :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">
			<el-table-column fixed type="index" label="序号">
				<template scope="scope"><span>{{scope.$index+(pageNum - 1) * pageSize + 1}} </span></template>
			</el-table-column>
			<el-table-column prop="id" label="职工编号" width="180px"></el-table-column>
			<el-table-column prop="name" label="姓名" width="180px"></el-table-column>
			<el-table-column prop="departmentName" label="部门"></el-table-column>
			<el-table-column prop="jobtitleName" label="职位"></el-table-column>
			<el-table-column prop="phone" label="手机"></el-table-column>
			<el-table-column prop="state" label="在职状态" width="180px"></el-table-column>
			<el-table-column fixed="right" label="操作">
				<template slot-scope="scope">
				<el-button type="text" size="small" @click="show(scope.row)" icon="el-icon-search" circle>查看</el-button>
				<el-button type="text" size="small" @click="edit(scope.row)" icon="el-icon-edit" circle>编辑</el-button>
				<el-button type="text" size="small" @click="del(scope.row)" icon="el-icon-delete" circle>删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<div style="text-align:right;">
			<el-pagination background layout="prev, pager, next" :total="pages" :current-page="pageNum" @current-change="changePageNum"></el-pagination>
		</div>
		<!-- 查看职工信息 -->
		<el-dialog title="职工信息" :visible.sync="dialogVisible">
			<el-form :model="positionform" label-width="100px" class="demo-ruleForm">
				<el-form-item label="姓名:">{{positionform.name}}</el-form-item>
				<el-form-item label="性别:">{{positionform.sex==0?"女":"男"}}</el-form-item>
				<el-form-item label="联系方式:">{{positionform.phone}}</el-form-item>
				<el-form-item label="年龄:">{{positionform.age}}</el-form-item>
				<el-form-item label="身份证号:">{{positionform.identityCode}}</el-form-item>
				<el-form-item label="身份证照片:"><img width="200px" :src="positionform.identityPhoto"/></el-form-item>
				<el-form-item label="部门:">{{positionform.departmentName}}</el-form-item>
				<el-form-item label="职位">{{positionform.jobtitleName}}</el-form-item>
				<el-form-item label="工资">{{positionform.salary}}</el-form-item>
			</el-form>
		</el-dialog>
		<!-- 编辑职工信息 -->
		<el-dialog title="修改信息" :visible.sync="dialogVisibleedit">
			<el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="姓名" prop="name">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="性别" prop="sex">
					<el-select v-model="form.sex" placeholder="请选择性别">
						<el-option label="女" :value="0"></el-option>
						<el-option label="男" :value="1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="联系方式" prop="phone">
					<el-input v-model="form.phone"></el-input>
				</el-form-item>
				<el-form-item label="年龄" prop="age">
					<el-input v-model="form.age"></el-input>
				</el-form-item>
				<el-form-item label="身份证号" prop="identityCode">
					<el-input v-model="form.identityCode"></el-input>
				</el-form-item>
				<el-form-item label="身份证照片" prop="identityCode">
					<el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
						<i class="el-icon-upload"></i>
						<div class="el-upload__text">将<em>身份证照片</em>拖到此处，或<em>点击上传</em></div>
						<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
					</el-upload>
				</el-form-item>
				<el-form-item label="部门" prop="departmentId">
					<el-select v-model="form.departmentId" placeholder="请选择部门" @change="selectJob()">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="职位" prop="jobtitleId">
					<el-select v-model="form.jobtitleId" placeholder="请选择职位">
						<el-option v-for="item in jobtitle" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="工资" prop="salary">
					<el-input v-model="form.salary"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
					<el-button @click="cancelEdit()">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>


<script>
	export default{
		name:"PositionList",
		data(){
			return{
				options:[],							//所有部门
				jobtitles:[],						//所有职位 
				jobtitle:[],						//某个部门下的所有职位
				search_departmentId:"",				//查询的部门ID
				search_positionId:"",				//查询的职工ID
				tableData:[],						//表格内数据
				pages:0,							//总页数
				pageNum:1,							//当前页
				pageSize:3,							//每页数据
				dialogVisibleedit:false,			//是否打开编辑表单
				dialogVisible:false,				//是否打开查看表单
				form:{},							//编辑职工表格
				positionform:{},					//查看职工表格
				ruleForm: {							//编辑职工表格内容
					name: '',
					sex: '',
					phone:'',
					age:'',
					identityCode:'',
					departmentId:'',
					positionId:'',
					salary:'',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
        		},
				rules: {							//编辑表格内容要求
					name: [
						{ required: true, message: '请输入姓名', trigger: 'blur' }
						// { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
					],
					sex: [
						{ required: true, message: '请选择性别', trigger: 'change' }
					],
					phone: [
						{ required: true, message: '请输入联系方式', trigger: 'blur' }
					],
					identityCode: [
						{ required: true, message: '请输入身份证号', trigger: 'blur' }
					],
					departmentId: [
						{ required: true, message: '请选择部门', trigger: 'change' }
					],
					jobtitleId: [
						{ required: true,message: '请选择职位', trigger: 'change' }
					],
					age: [
						{ required: true, message: '请输入年龄', trigger: 'blur' }
					],
					salary: [
						{ required: true, message: '请输入工资', trigger: 'blur' }
					]
				}
			}
		},
		methods:{
			show(row) {								//查看职工信息
				let that = this;
				this.$axios.get(that.$global.zuulIp+"/position/getPositionById?positionId="+row.id).then((response)=>{
					that.positionform = response.data;
				}).catch((response)=>{
					console.log(response);
				});
				this.dialogVisible = true;
			},
			edit(row){								//编辑时显示职工信息
				let that = this;
				this.$axios.get(that.$global.zuulIp+"/position/getPositionById?positionId="+row.id).then((response)=>{
					that.form.departmentId = response.data.departmentId;
					that.selectJob();
					that.form = response.data;
				}).catch((response)=>{
					console.log(response);
				});
				this.dialogVisibleedit = true;
			},
			selectJob(){							//二级职位
				this.form.jobtitleId = "";
				this.jobtitle = [];
				let j = 0;
				for(let i = 0;i < this.jobtitles.length;i++){
					if(this.jobtitles[i].departmentId == this.form.departmentId){
						this.jobtitle[j++]={
							value: this.jobtitles[i].id,
							label: this.jobtitles[i].name
						}
					}
				}
			},
			getDepartments(){						//获取所有部门
				let that = this;
				this.$axios.post(that.$global.zuulIp+"/position/getDepartmentList").then((response)=>{
					for(let i = 0;i < response.data.length;i++){
						var option={
							value: response.data[i].id,
							label: response.data[i].name
						}
						that.options.push(option);
					}
				}).catch((response)=>{
					console.log(response);
				})
			},										
			getJobtitlesByDepartmentId(){			//获取所有职位
				let that = this;
				this.$axios.get(that.$global.zuulIp+"/position/getJobtitleListByDepartmentId?departmentId="+0).then((response)=>{
					that.jobtitles = response.data;
				}).catch((response)=>{
					console.log(response);
				})
			},
			search(){								//查询
				const data = {
					pageNum : this.pageNum,
					pageSize : this.pageSize,
					positionId : this.search_positionId,
					departmentId : this.search_departmentId
				};
				let that = this;
				this.$axios.post(that.$global.zuulIp+"/position/getPositionPageInfo",data).then((response)=>{
					that.tableData = response.data.list;
					that.pages = parseInt(response.data.pages)*10;
					let state = "";
					for(let i = 0;i < that.tableData.length;i++){
						if(that.tableData[i].serviceStatus==0){
							state = "离职";
						}else if(that.tableData[i].serviceStatus==1){
							state = "在职";
						}else{
							state = "请假";
						}
						that.$set(that.tableData[i],"state",state);
					}
				}).catch((response)=>{
					console.log(response);
				})
			},
			clear(){								//清空查询条件
				this.search_departmentId = "";
				this.search_positionId = "";
			},
			changePageNum(currentPage){				//改变页数
				this.pageNum = currentPage;
				this.search();
			},
			submitForm(formName) {					//编辑职工
				let that = this;
				this.$refs[formName].validate((valid) => {
					if (valid) {
						// that.$axios.post(that.$global.zuulIp+"/position/modPosition",that.form).then((response)=>{
							
						// }).catch((response)=>{
						// 	console.log(response);
						// })
						that.$alert('修改成功!',{
							confirmButtonText: '确定'
						}).then(()=>{
							that.dialogVisibleedit = false;
						})
					} else {
						return false;
					}
				});
			},
			cancelEdit(){
				this.dialogVisibleedit = false;
			},
			del(row){								//删除
				let that = this;
				this.$confirm('此操作将删除该职工, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
					}).then(() => {
						that.$axios.get(that.$global.zuulIp+"/position/delPosition?positionId="+row.id).then((response)=>{
							if(response.data>0){
								that.$message({
									type: 'success',
									message: '删除成功!'
								});
								that.search();
							}else{
								that.$message({
									type: 'error',
									message: '删除失败,请联系管理员!'
								});
							}
						}).catch((response)=>{
							console.log(response);
						})
					}).catch(() => {
					that.$message({
						type: 'info',
						message: '已取消删除'
					});          
				});
			},
			tableRowClassName({row}) {	//表格变色
				if (row.state == '请假') {
					return 'warning-row';
				}else if (row.state == '离职') {
					return 'risk-row';
				}
				return '';
			}
		},
		mounted:function(){
			this.getDepartments();
			this.search();
			this.getJobtitlesByDepartmentId();
		},
	}
</script>

<style scoped="scoped">
	.searchform{
	  display: flex;
	  float: left;
	}
	.playerinformation .el-button{
		margin-left: 15px;
	}
</style>
<style>
	.el-table .warning-row {
		background-color: oldlace;
	}
	.el-table .risk-row {
		background-color: #FFE4E1;
	}
</style>